.auto-complete {
  position: relative;
  .auto-complete__list {
    list-style: none;
    padding-left: 0;
    white-space: nowrap;
    position: absolute;
    background: $white;
    z-index: 100;
    top: calc(100% + 8px);
    left: 0;
    border: 1px solid $gray-300;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
    width: 100%;
    margin: 0;
    .list-item {
      padding: 0.5rem 1rem;
      cursor: pointer;
      transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
      color: $gray-900;
      &:hover {
        color: $primary;
      }
    }
  }
  .auto-complete__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 75px;
  }
  .highlighted-item {
    color: $primary;
  }
}
